<template>
	<view class="container">
		<view class="tip-container">
			<text class="title">请点选每日菜品</text>
			<text>可选两荤两素，或一纯肉两素菜</text>
			<view class="pic-tip">
				<view class="tip-item">
					<text class="iconfont icon-huncai huncai-color"></text>
					<text class="iconfont icon-huncai huncai-color"></text>
					<text class="text">纯肉</text>
				</view>
				<view class="tip-item">
					<text class="iconfont icon-huncai huncai-color"></text>
					<text class="text">荤菜</text>
				</view>
				<view class="tip-item">
					<text class="iconfont icon-sucai sucai-color"></text>
					<text class="text">素菜</text>
				</view>
			</view>
		</view>
		<view class="list-container">
			<view :class="['list-item', index % 2 == 0 ? '' : 'is-end']" v-for="(item, index) in list" :key="index">
				<view class="content-item" >
					<image :src="item.cover" mode="scaleToFill" class="cover" />
					<view class="info-container">
						<view class="name">
							<text>{{item.name}}</text>
						</view>
						<view class="type" v-if="item.type == 1">
							<text class="iconfont icon-huncai huncai-color" />
							<text class="iconfont icon-huncai huncai-color" />
						</view>
						<view class="type" v-else-if="item.type == 2">
							<text class="iconfont icon-huncai huncai-color" />
						</view>
						<view class="type" v-else>
							<text class="iconfont icon-sucai sucai-color" />
						</view>
						<view class="today-count">
							6
						</view>
					</view>
					<view class="mask" v-show="item.selected">
						<text class="iconfont icon-xuanzhong selected-icon"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="button-wrap">
			<view class="selected-wrap">
				{{selectedText}}
			</view>
			<view :class="['commit-button', 'enable-status']">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	const list = [
		{
			name: '素炒土豆丝',
			id: 1,
			cover: 'https://img2.baidu.com/it/u=900266709,4082004714&fm=26&fmt=auto&gp=0.jpg',
			selected: false,
			isMeat: false,
			type: 1
		},
		{
			name: '麻辣豆腐',
			id: 2,
			cover: 'https://img0.baidu.com/it/u=2161075322,3204666104&fm=26&fmt=auto&gp=0.jpg',
			selected: true,
			isMeat: false,
			type: 2
		},
		{
			name: '素炒土豆丝',
			id: 1,
			cover: 'https://img2.baidu.com/it/u=900266709,4082004714&fm=26&fmt=auto&gp=0.jpg',
			selected: false,
			isMeat: false,
			type: 3
		},
	]
	export default {
		data() {
			return {
				list,
			}
		},
		computed: {
			selectedText() {
				return '未选中'
			}
		},
		onLoad() {
			// 先获取用户是否已经登录，用缓存处理
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	@import url("//at.alicdn.com/t/font_2734682_umvvj0z8rm.css");
	
	.container {
		box-sizing: border-box;
		width: 750rpx;
		/* padding-top: 44px; */
		min-height: calc(100vh - 44px);
		background-color: #F1F1F1;
		padding-bottom: calc(142rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
		padding-bottom: calc(142rpx + env(safe-area-inset-bottom)); 
	}
	.tip-container {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx 30rpx 0;
		font-size: 28rpx;
		color: #666;
		.title {
			font-size: 34rpx;
			color: #223222;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.pic-tip {
			margin-top: 20rpx;
			display: flex;
			.tip-item {
				margin-right: 30rpx;
				.text {
					margin-left: 14rpx;
				}
			}
		}
		
	}
	.list-container {
		box-sizing: border-box;
		width: 100%;
		padding: 30rpx;
		display: flex;
		/* flex-direction: column; */
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	.list-item {
		display: flex;
		width: 345rpx;
		height: 400rpx;
		justify-content: flex-start;
		margin-bottom: 24rpx;
	}
	.is-end {
		justify-content: flex-end !important;
	}
	.content-item {
		position: relative;
		width: 330rpx;
		height: 400rpx;
		background-color: #FFF;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.cover {
		width: 330rpx;
		height: 330rpx;
	}
	.info-container {
		position: relative;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		height: 70rpx;
		padding: 0 10rpx 16rpx;
		justify-content: space-between;
		align-items: center;
		.today-count {
			position: absolute;
			top: -48rpx;
			left: 14rpx;
			width: 30rpx;
			height: 30rpx;
			background-color: rgba(0,0,0,0.4);
			font-size: 22rpx;
			color: #FFFFFF;
			text-align: center;
			line-height: 30rpx;
			border-radius: 4rpx;
			z-index: 6;
		}
	}
	.huncai-color {
		color: #ED691F;
	}
	.sucai-color {
		color: #6DBF65;
	}
	.mask {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		background-color: rgba(0,0,0,0.4);
		color: #FFF;
		font-size: 40rpx;
		justify-content: center;
		align-items: center;
		z-index: 9;
	}
	.selected-icon {
		font-size: 50rpx;
	}
	.button-wrap {
		box-sizing: border-box;
		position: fixed;
		left: 30rpx;
		bottom: calc(50rpx + constant(safe-area-inset-bottom));
		bottom: calc(50rpx + env(safe-area-inset-bottom));
		display: flex;
		width: 690rpx;
		height: 92rpx;
		border-radius: 46rpx;
		background-color: #FFF;
		border: 1rpx solid #FAFAFA;
		overflow: hidden;
		z-index: 10;
		.selected-wrap {
			box-sizing: border-box;
			flex: 1;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-left: 40rpx;
		}
		.commit-button {
			width: 160rpx;
			height: 100%;
			text-align: center;
			line-height: 92rpx;
		}
		.disable-status {
			background-color: #C0C0C0;
			color: #999;
		}
		.enable-status {
			background-image: linear-gradient(#ffa307, #fea219);
			color: #FFF;
			font-size: 38rpx;
			font-weight: bold;
			&:active {
				background-image: linear-gradient(#fea219, #ffa307);
			}
		}
	}
</style>
